<template>
  <el-dialog
    v-model="dialogVisible"
    title="管理场景"
    width="700px" 
    @close="handleClose"
    append-to-body
  >
    <el-table :data="sceneList" style="width: 100%" empty-text="暂无场景数据">
      <el-table-column prop="name" label="场景名称" />
      <el-table-column prop="fileName" label="文件名称" />
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template #default="scope">
          {{ formatTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>

    <!-- 这里不需要重命名对话框，只实现删除功能 -->
  </el-dialog>
</template>

<script setup>
// 导入Vue的ref和onMounted组件
import { ref, onMounted } from 'vue'; 
// 导入Element Plus组件
import { ElMessage, ElMessageBox, ElDialog, ElTable, ElTableColumn, ElButton, ElForm, ElFormItem, ElInput } from 'element-plus'; 
// 导入文件管理API方法
import { queryCzmlFiles, deleteCzmlFile } from '@/api/files'; 


// 控制主对话框显示状态的响应式引用
const dialogVisible = ref(false);
// 存储场景列表的响应式引用
const sceneList = ref([]);
// 存储当前要操作的场景
const currentScene = ref(null);

// 获取所有场景列表的方法
const fetchSceneList = async () => {
  try {
    // 调用CZML文件API获取文件列表
    const response = await queryCzmlFiles(); 
    if (response.code === 0) { // 注意：CZML文件API成功状态码为0
      // 如果请求成功，将文件列表转换为场景列表格式
      sceneList.value = response.data.map(file => ({
        id: file.fileId, // 文件ID用于删除操作
        fileId: file.fileId,
        name: file.fileName.replace(/\.czml$/, ''), // 移除.czml后缀作为场景名称
        fileName: file.fileName,
        createTime: file.createTime || new Date().toISOString() // 使用文件创建时间，如果没有则使用当前时间
      }));
      console.log('获取CZML文件列表成功:', sceneList.value);
    } else {
      // 如果请求失败，显示错误消息
      ElMessage.error(response.msg || '获取场景列表失败');
    }
  } catch (error) {
    // 如果发生错误，打印错误信息并显示错误消息
    console.error('获取场景列表失败:', error);
    ElMessage.error('获取场景列表失败');
  }
};

// 组件挂载后不主动获取场景列表，由show方法触发
// onMounted(() => {
//   fetchSceneList(); 
// });

// 显示对话框并初始化数据的方法
const show = () => {
  dialogVisible.value = true;
  fetchSceneList(); // 显示对话框时获取最新的场景列表
};

// 处理对话框关闭事件
const handleClose = () => {
  dialogVisible.value = false;
};

// 删除了重命名相关函数，只保留删除功能

// 处理删除场景的方法
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除场景 "${row.name}" 吗？此操作不可撤销。`,
    '警告',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(async () => {
    try {
      // 显示加载中的提示信息
      const loading = ElMessage.info({
        message: '正在删除场景，请稍候...',
        duration: 0
      });
      
      try {
        // 调用CZML文件API删除文件
        const response = await deleteCzmlFile(row.fileId);
        loading.close(); // 关闭加载提示
        
        if (response.code === 0) { // 删除成功状态码为0
          ElMessage.success(response.message || '场景删除成功');
          
          // 如果当前打开的场景是被删除的场景，则清空localStorage
          const currentSceneStr = localStorage.getItem('currentScene');
          if (currentSceneStr) {
            const currentScene = JSON.parse(currentSceneStr);
            if (currentScene.fileId === row.fileId) {
              // 清空localStorage中的所有场景相关数据
              localStorage.removeItem('currentScene');
              localStorage.removeItem('sceneId');
              localStorage.removeItem('satellites');
              localStorage.removeItem('groundStations');
              localStorage.removeItem('areaTargets');
              localStorage.removeItem('pointTargets');
              localStorage.removeItem('payloads');
              
              // 提示用户刷新页面
              ElMessage.warning('当前打开的场景已被删除，请刷新页面');
            }
          }
          
          fetchSceneList(); // 重新获取场景列表以更新显示
        } else {
          ElMessage.error(response.message || '场景删除失败');
        }
      } catch (innerError) {
        loading.close();
        throw innerError; // 抛出内部错误供外层捕获
      }
    } catch (error) {
      console.error('场景删除失败:', error);
      ElMessage.error('场景删除失败: ' + (error.message || '未知错误'));
    }
  })
  .catch(() => {
    // 用户取消删除操作
    ElMessage.info('已取消删除');
  });
};

// 格式化时间戳
const formatTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  // 返回本地化的日期时间字符串
  return date.toLocaleString(); 
};

// 暴露方法给父组件调用
defineExpose({
  show,
});
</script>

<style scoped lang="scss">
/* 给按钮之间添加一些间距 */
.el-button + .el-button {
  margin-left: 8px; 
}

/* 可以添加更多自定义样式 */
.el-table {
  cursor: default; /* 表格行本身不可点击，操作通过按钮 */
}
</style>